<template>
  <div :style="{ height: height + 'px', overflow: 'auto' }">
    <h2>简易事故</h2>
    <el-table border :data="table.data1" style="width: 100%"  :span-method="objectSpanMethod1">
      <el-table-column label="多发道路" prop="county" width="150">
        <!-- <el-table-column class-name="invisible-col" prop="county" width="150" />
      <el-table-column class-name="invisible-col" prop="town" width="150" /> -->
      </el-table-column>
      <el-table-column prop="road" label="道路" />
      <el-table-column prop="sgCount" label="事故起数" />
    </el-table>

    <h2>一般事故</h2>
    <el-table border :data="table.data2" style="width: 100%"  :span-method="objectSpanMethod2">
      <el-table-column label="多发道路" prop="county" width="150">
        <!-- <el-table-column class-name="invisible-col" prop="county" width="150" />
      <el-table-column class-name="invisible-col" prop="town" width="150" /> -->
      </el-table-column>
      <el-table-column prop="road" label="道路" />
      <el-table-column prop="sgCount" label="事故起数" />
    </el-table>


  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  data:{
    type: Object
  },
  height: {
    type: Number,
    default: 500
  },
})


const table = computed(() => {
  const data1 = []
  const data2 = []
  const groups1 = {}
  const groups2 = {}
  const { simple, common } = props.data
  for (let i = 0; i < simple.length; i++) {
    const item = simple[i]
    for (let j = 0; j < item.dataList.length; j++) {
      data1.push({ county: item.county, ...item.dataList[j], length: item.dataList.length })
    }
  }

  for (let i = 0; i < common.length; i++) {
    const item = common[i]
    for (let j = 0; j < item.dataList.length; j++) {
      data2.push({ county: item.county, ...item.dataList[j], length: item.dataList.length })
    }
  }


  for (let i = 0; i < data1.length; i++) {
    const group = groups1[data1[i].county]
    if (!group) {
      groups1[data1[i].county] = {
        rowIndex: i,
        num: data1[i].length || 0
      }
    }
  }

  for (let i = 0; i < data2.length; i++) {
    const group = groups2[data2[i].county]
    if (!group) {
      groups2[data2[i].county] = {
        rowIndex: i,
        num: data2[i].length || 0
      }
    }
  }
  return {
    data1,
    data2,
    groups1,
    groups2
  }
})

const objectSpanMethod1 = ({ row, rowIndex, columnIndex }) => {
  const group = table.value.groups1[row.county]
  if (columnIndex === 0) {
    if (rowIndex === group.rowIndex) {
      return {
        rowspan: group.num,
        colspan: 1
      }
    } else {
      return {
        rowspan: 0,
        colspan: 0
      }
    }
  }
}

const objectSpanMethod2 = ({ row, rowIndex, columnIndex }) => {
  const group = table.value.groups2[row.county]
  if (columnIndex === 0) {
    if (rowIndex === group.rowIndex) {
      return {
        rowspan: group.num,
        colspan: 1
      }
    } else {
      return {
        rowspan: 0,
        colspan: 0
      }
    }
  }
}
</script>

<style lang="less" scoped>
h2{
  font-size: 24px;
  color: #c9cdfe;
  margin-bottom: 8px;
}
</style>
